<template>
<div>
  <div class="tang">热销推荐</div>
  <div class="itme" v-for="item of list" :key="item.id">
    <router-link :to="'/detail/' + item.id">
      <div class="itme-left">
        <img :src="item.imgUrl" />
      </div>
      <div class="itme-right">
        <div class="itme-p">
          {{item.p}}
        </div>
        <div class="itme-p">
          <p class="p">{{item.neirong}}</p>
        </div>
        <div class="itme-p">
          <button class="button">{{item.button}}</button>
        </div>
      </div>
    </router-link>
  </div>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
.tang
  margin-top: 0.6rem
  line-height: 2.4rem
  background: #eee
  text-indent: .4rem
  font-size: 1.2rem
.itme
  overflow: hidden
.itme-left
  float: left
  height: 8rem
  width: 8rem
  margin-left: .2rem
  margin-top: .2rem
.itme-left img
  height: 8rem
  width: 8rem
.itme-right
  position: absolute
  left: 9rem
  color: #101010
  text-decoration: none
  .itme-p
    margin-top: .6rem
    height: 2rem
    line-height: 2rem
    font-size: 14px
    .p
      color: #666
      margin: 0
      font-size: 13px
      height: 1.8rem
      overflow: hidden
    .button
      background: yellow
</style>
